<template>
	<view class="feedback-index">
		<view class="" style="padding-top: 10px;padding-bottom: 100px;">
			<view class="" v-for="(item, index) in tabList" :key="index">
				<view class="feed-title">
					{{item.name}}
				</view>
				<view class="display-flex menus" style="flex-wrap: wrap">
				
					<view v-if="item.name == '线路问题'" class=" menu-block "  v-for="(menuItem,menuIndex) in item.child" :key="menuIndex"  @click="navToPath(menuItem,1)">
						<view class="item-content display-flex display-flex-column">
						
							<image class="block-img"  :src="menuItem.extra"></image>
							<text class="block-text single-line-ellipsis">{{menuItem.name}}</text>
						</view>
					</view>
					<view v-if="item.name == '实时公交问题'" class=" menu-block-or  "  v-for="(menuItem,menuIndex) in item.child" :key="menuIndex"  @click="navToPath(menuItem,2)">
						<view class="display-flex display-flex-align-center" :class="menuIndex%2==0?'or-bk-no':'or-bk'">
							<view class="" style="margin-right: 8px;margin-top: 8px;">
								<image class="block-img"  :src="menuItem.extra"></image>
							</view>
							<view class="item-content display-flex display-flex-column" style="align-items: flex-start;">
								<text class="block-text single-line-ellipsis">{{menuItem.name}}</text>
								<view class="block-remarker single-line-ellipsis">{{menuItem.remaker}}</view>
							</view>
						</view>
					</view>
					<view v-if="item.name == '公交建议'" class=" menu-block-or "  v-for="(menuItem,menuIndex) in item.child" :key="menuIndex"  @click="navToPath(menuItem,3)">
						<view class="display-flex display-flex-align-center" :class="menuIndex%2==0?'bl-bk-no':'bl-bk'">
							<view class="" style="margin-right: 8px;margin-top: 8px;">
								<image class="block-img"  :src="menuItem.extra"></image>
							</view>
							<view class="item-content display-flex display-flex-column" style="align-items: flex-start;">
								<text class="block-text single-line-ellipsis">{{menuItem.name}}</text>
								<view class="block-remarker single-line-ellipsis">{{menuItem.remaker}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<myFeedback></myFeedback>
	</view>
</template>

<script>
    import myFeedback from '@/components/my_feedback/index.vue'
	import {
		feedbackTypeNew,
		feedback
	} from '@/api/user.js'
	import {
		checkPhone,
		isEmailAvailable
	} from '@/utils/validate.js'
	import {
		mapGetters
	} from "vuex";
	import { HTTP_REQUEST_URL } from '@/config/app';
	import { configMap } from '@/utils';
	const app = getApp();
	export default {
		components: { myFeedback },
		data() {
			return {
				theme:app.globalData.theme,
				domain: HTTP_REQUEST_URL,
				// 反馈类型
				tabList: [],
				// 反馈类型key
				tabKey: 0,
				// 反馈列表
				qsArray: [],
				// 反馈index
				qsIndex: 0,
				// 反馈内容
				con: '',
				uploadImg: [],
				name: '',
				phone: '',
				deviceId: '',
				isShowbox: false,
				isUpload: true,
				fromType: 0,
				lineName: '',
				stationName: '',
			}
		},
		
		watch: {
			uploadImg(nVal, oVal) {
				this.isUpload = nVal.length < 6 ? true : false
			}
		},
		onLoad(option) {
			if(option.type && option.type != 'undefined'){
				this.fromType = option.type
			}
			if(option.lineName && option.lineName!= 'undefined'){
				this.lineName = option.lineName
			}
			if(option.stationName && option.stationName!='undefined'){
				this.stationName = option.stationName
			}
			
			// console.log('uni.getSystemInfoSync()',uni.getSystemInfoSync())
			var system = uni.getSystemInfoSync()
			this.deviceId = system.deviceId
			// 获取反馈类型
			feedbackTypeNew().then(({data}) => {
				console.log('data',data)
				this.tabList = data
				// this.getFeedBack(data)
				// console.log(this.tabKey)

			})
		},
		methods: {
			navToPath(item, type){
				uni.navigateTo({
					url: `/pages/users/feedback/form?id=`+item.id+'&pid='+item.pid+'&title='+item.name+'&type='+type+'&fromType='+this.fromType+'&lineName='+this.lineName+'&stationName='+this.stationName
				})
			},
			toChat(){
				uni.navigateTo({
					url: `/pages/chat/customer_list/chat?mer_id=0`
				})
			},
			openWxKf(){
				// #ifdef MP-WEIXIN
				wx.openCustomerServiceChat({
					//企业微信的企业id
					corpId: 'wwba8b8d508968a0f8',
					extInfo: {
						//客服链接
						url: 'https://work.weixin.qq.com/kfid/kfcaea708c2c0d651d2'
					},
					success: (e) => {
						console.log('e', e)
						
						return this.$util.Tips({
							title: e
						});
					},
					fail: (err) => {
						console.log('err', err)
						return this.$util.Tips({
							title: err
						});
					}
				})
				// #endif
				
				// #ifdef APP-PLUS
				let sweixin = null
				plus.share.getServices(res => {
					sweixin = res.find(i => i.id === 'weixin')
					if (sweixin) {
						sweixin.openCustomerServiceChat({
							corpid: 'wwba8b8d508968a0f8',
							url:'https://work.weixin.qq.com/kfid/kfcaea708c2c0d651d2'
						})
					} else {
						// plus.nativeUI.alert('当前环境不支持微信操作')
						uni.showToast({
							title: "当前环境不支持微信操作",
							icon: 'error'
						})
					}
				}, function() {
					uni.showToast({
						title: "获取服务失败，不支持该操作。" + JSON.stringify(e),
						icon: 'error'
					})
				})
				// #endif
			
			
			},
			// 获取含有二级分类的反馈类型
			getFeedBack(data) {
				let that = this;
				data.forEach(function(item, i) {
					if (item.children) {
						that.tabKey = i;
						that.qsArray = data[that.tabKey].children
						return;
					}
				});
			},
			// 下拉选中
			bindPickerChange(e) {
				this.qsIndex = e.target.value
			},
			// tab切换
			bindTab(item, index) {
				this.tabKey = index
				this.qsIndex = 0
				// this.qsArray = this.tabList[this.tabKey].children ? this.tabList[this.tabKey].children : []

			},
			/**
			 * 上传文件
			 * 
			 */
			uploadpic: function() {
				let that = this;
				that.$util.uploadImageOne({
					url: 'upload/image',
					name: 'multipart',
					model: "maintain",
					pid: 0
				}, function(res) {
					console.log(res, '回调')
					that.uploadImg.push(res.data.url);
					that.$set(that, 'uploadImg', that.uploadImg);
				});
				
			},
			// 弹窗关闭
			close() {
				this.con = ''
				this.uploadImg = []
				this.name = ''
				this.phone = ''
				this.isShowbox = false
			},
			// 删除图片
			deleteImg(index) {
				this.uploadImg.splice(index, 1)
			},
			// 提交反馈
			bindSub() {
				if (!this.con) {
					uni.showToast({
						title: '请输入反馈内容',
						icon: 'none'
					})
					return
				}
				// if (this.uploadImg.length == 0) {
				// 	uni.showToast({
				// 		title: '请上传图片',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				if (!this.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (!checkPhone(this.phone)) {
					uni.showToast({
						title: '请输入有效的手机号',
						icon: 'none'
					})
					return
				}
				// console.log(this.qsArray)
				// console.log(this.qsIndex)
				feedback({
					// type: this.qsArray[this.qsIndex].feedback_category_id,
					type: this.tabList[this.tabKey].id,
					deviceId: this.deviceId,
					content: this.con,
					images: JSON.stringify(this.uploadImg),
					realname: this.name,
					contact: this.phone
				}).then(res => {
					this.isShowbox = true
				}).catch(error => {
					this.$util.Tips({
						title: error
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		background-color: #fff !important;
	}
	
	.feed-title{
		padding: 20px 0 5px 15px;
		color: #000;
		font-weight: 600;
		font-size: 16px;
	}


 .menu-block {
	   // background-image: linear-gradient(180deg,#fa5956,#fb8650);
	   // height: 60px;
	   // margin-top: 10px;
	   // border-radius: 6rpx;
	   // box-shadow: 0 18rpx 18rpx 0 #e7e7e8;
	      // background: #fff;
	      border-radius: 13rpx;
	      // box-shadow: 0 18rpx 18rpx 0 #e7e7e8;
	      display: inline-block;
	      // height: 125rpx;
	      margin-top: 10px;
	      white-space: nowrap;
		 width: 25%;
   }
   .menu-block-or {
   	   // background-image: linear-gradient(180deg,#fa5956,#fb8650);
   	   // height: 60px;
   	   // margin-top: 10px;
   	   // border-radius: 6rpx;
   	   // box-shadow: 0 18rpx 18rpx 0 #e7e7e8;
   	      // background: #fff;
   	      border-radius: 10rpx;
   	      // box-shadow: 0 18rpx 18rpx 0 #e7e7e8;
   	      // display: inline-block;
   	      // height: 125rpx;
   	      margin-top: 10px;
   	      // white-space: nowrap;
   		 width: 50%;
     }
     
   
   .block-img {
      width: 49px;
	  height: 49px;
	  margin: 0 auto;
   }
   
   .block-text {
       color: #1f1f1f;
       font-size: 24rpx;
	   margin-top: 8px;
   }
   
   .block-remarker{
	   color: #c8c8c8;
	   font-size: 24rpx;
	   margin-top: 8px;
   }

   .item-content {
       align-items: center;
       display: flex;
       height: 100%;
   }
   
   .or-bk{
	 background: #FDFAF3;
	 margin: 0 10px 0 10px;
	 border-radius: 10rpx;
	 padding: 10px;
   }
   .or-bk-no{
   	 background: #FDFAF3;
   	 margin: 0 0 0 10px;
   	 border-radius: 10rpx;
	padding: 10px;
   }
   
   .bl-bk{
   	 background: #F6FAFD;
   	 margin: 0 10px 0 10px;
   	 border-radius: 10rpx;
   	 padding: 10px;
   }
   .bl-bk-no{
   	 background: #F6FAFD;
   	 margin: 0 0 0 10px;
   	 border-radius: 10rpx;
   	padding: 10px;
   }
</style>
